<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <button class="btn1">发送请求11</button>
    <button class="btn2">发送发送请求222</button>
    <button class="btn3">发送post333</button>
    <button class="btn4">发送put请求444</button>
    <script>
        // 设置 axios的默认配置 ， 所有axios的公共配置
        // axios.defaults.timeout = 2000; // 所有的axios超时时间都是2s
        // axios.defaults.baseURL =  "/api" ; // 基础路径 所有的请求都会把baseURL拼接到url前在发送请求
        // // 1.提取所有 axios的公共路径  2.项目上线以后，没有跨域问题，baseURL后面会修改
        let btn1 = document.querySelector(".btn1");
        let btn2 = document.querySelector(".btn2");
        let btn3 = document.querySelector(".btn3");
        let btn4 = document.querySelector(".btn4");
        //需求：  一、二按钮 请求超时设置 2s ，需要请求4000端口服务器 。三、四按钮请求超时设置3s ，需要请求 5000端口服务器
        //把请求分类：axios可以创建实例
        //创建两个axios实例
        let axiosInstance1 = axios.create({
            timeout: 2000,
            baseURL: "http://localhost:4000/api"
        })
        //  instance1.defaults.timeout = 2000;
        // instance1.defaults.baseURL = "http://localhost:4000/api"
        btn1.onclick = function () {
            axiosInstance1({
                url: "/getdata"
            }).then(res => {
                console.log(res, "btn1-then-res");
            })
        }
        btn2.onclick = function () {
            axiosInstance1({
                url: "/getdata2"
            }).then(res => {
                console.log(res, "btn2-then-res");
            })
        }


        let instance2 = new axios.create();
        instance2.defaults.timeout = 2000;
        instance2.defaults.baseURL = "http://localhost:5000/api"

        btn3.onclick = function () {
            instance2({
                url: "/getdata",
                // timeout: 2000,
                // baseURL: "http://localhost:5000/api"
            }).then(res => {
                console.log(res, "btn3-then-res");
            })
        }
        btn4.onclick = function () {
            instance2({
                url: "/getdata2",
                // timeout: 2000,
                // baseURL: "http://localhost:5000/api"
            }).then(res => {
                console.log(res, "btn4-then-res");
            })
        }
    </script>
</body>

</html>